import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    Image,
    Alert,
    SectionList,
    TextInput,
    Linking,
    ScrollView,
    Switch,
    DeviceEventEmitter,
} from 'react-native';
import Header from "../../../components/header";
import Loading from "../../../utils/Loading";
import HttpUtils from '../../../utils/HttpUtils';
import HttpUrls from '../../../utils/HttpUrls';
import NoData from "../../../utils/NoData";
import Constant from '../../../utils/Constant'//全局变量



let navigation

const isIos = Platform.OS == 'ios';

export default class CarConfigPage extends Component {

    constructor(props) {
        super(props);
        let species = this.props.route && this.props.route.params && this.props.route.params.species ? this.props.route.params.species : ''
        this.state = {
            species,
            dataSources: [],
            loaded: false,
        }
    }

    componentDidMount() {
        this.getCarConfigDetail()
    }

    getCarConfigDetail() {
        if (this.Loading) {
            this.Loading.show();
        }
        let param = {
            species: this.state.species
        }
        HttpUtils.getRequest(HttpUrls.getCarConfigDetailBySpecies, param)
            .then((result) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
                let data = result.data
                if (data) {
                    let dataSources = []
                    data.map((info) => {
                        let index = -1
                        dataSources.map((sectionInfo, idx) => {
                            if (sectionInfo['mainType'] == info['mainType']) {
                                let contents = sectionInfo['data'];
                                let detailValue = info['detailValue'];
                                if (detailValue) {
                                    detailValue.replace('&nbsp;', ' ')
                                    contents.push({ 'detailName': info['detailName'], 'detailValue': detailValue })
                                    index = idx
                                }
                            }
                        })
                        if (index == -1) {
                            let sectionInfo = {}
                            let contents = []
                            sectionInfo['mainType'] = info['mainType']
                            let detailValue = info['detailValue'];
                            if (detailValue) {
                                detailValue.replace('&nbsp;', ' ')
                                contents.push({ 'detailName': info['detailName'], 'detailValue': detailValue })
                                sectionInfo['data'] = contents
                                dataSources.push(sectionInfo)
                            }
                        }
                    })
                    this.setState({
                        dataSources,
                        loaded: true
                    })
                }
            })
            .catch((error) => {
                if (this.Loading) {
                    this.Loading.hide();
                }
            });
    }

    render() {
        navigation = this.props.navigation;
        return (
            <View style={styles.container}>
                <Header navigation={navigation} Title={'参数配置'} ></Header>

                <SectionList
                    ref="sectionList"
                    renderSectionHeader={this.renderSectionHeader}
                    renderItem={this.renderItemView.bind(this)}
                    stickySectionHeadersEnabled={true}
                    showsHorizontalScrollIndicator={false}
                    sections={this.state.dataSources}
                    ListEmptyComponent={this.state.loaded ? this.renderEmpty:''}
                    keyExtractor={this._extraUniqueKey}
                />

                <Loading onRef={(ref) => (this.Loading = ref)} />
            </View>
        )
    }

    renderEmpty() {
        if (!this.state.isRefresh) {
            return (
                <NoData Desc="暂无数据" style={{ marginTop: gREM(200) }} />
            )
        } else {
            return (
                null
            )
        }
    }

    renderSectionHeader = (info) => {
        return (
            <View style={styles.sectionStyle}>
                <Text style={styles.settingTitleText}>{info.section.mainType}</Text>
                <View style={styles.settingDesBox}>
                    <Text style={[styles.settingDesText, { marginLeft: 5 }]}>● 标配</Text>
                    <Text style={styles.settingDesText}>○ 选配配</Text>
                    <Text style={styles.settingDesText}>- 无</Text>
                </View>
            </View>
        )
    }

    renderItemView({ item, index }) {
        return (
            <View style={styles.itemContainer}>
                <Text style={styles.keyText}>{item.detailName}</Text>
                <Text>{item.detailValue}</Text>
            </View>
        )
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F9F9F9',
    },
    itemContainer: {
        height: 44,
        backgroundColor: '#fff',
        paddingHorizontal: 15,
        display: 'flex',
        flexDirection: 'row',
        backgroundColor: '#ffffff',
        borderBottomColor: '#e1e1e1',
        borderBottomWidth: 0.5,
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    keyText: {
        fontSize: 14,
        color: '#999999'
    },
    sectionStyle: {
        paddingVertical: 16,
        paddingHorizontal: 15,
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: "space-between",
        backgroundColor: '#FFFFFF',

        elevation: 4,  //  设置阴影角度，通过这个设置有无阴影（这个是最重要的，决定有没有阴影）
        shadowColor: '#808080',  //  阴影颜色
        shadowOffset: { width: 0, height: 2 },  // 阴影偏移
        shadowOpacity: 0.2,  // 阴影不透明度
        shadowRadius: 4,
    },
    sectionText: {
        color: '#333333',
        fontSize: 18,
        fontWeight: 'bold',
    },
    settingDesBox: {
        flexDirection: "row",
        alignItems: "center",
    },
    settingTitleText: {
        flex: 1,
        fontSize: 14,
        fontWeight: "bold",
        color: '#333333'
    },
    settingDesText: {
        fontSize: 14,
        color: '#333333',
        marginLeft: 25,
    },


})